<template>
    <div class="ctrl-tool">
        <ul class="list">
            <li class="item" @click="delItem">删除</li>
            <li class="item" v-if="!editStatus" @click="ditItem">编辑</li>
            <li class="item" v-else @click="cancelEdit">取消编辑</li>
            <li class="item" @click="moveItem">移动</li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import util from '../util/lmap/utils.js'
import olMap from '../util/lmap/lmap.js'
import polygon from '../util/lmap/polygon.js'
export default {
    props: {
        editStatus: {
            type: Boolean,
            default: false
        }
        // type: {
        // 	type: String,
        // 	default: ''
        // }
    },
    model: {
        prop: 'editStatus',
        event: 'change'
    },
    data() {
        return {
            // 当前编辑的feature
            curItem: {
                target: null,
                feature: null, // feature
                coordinates: [],
                movePoint: {
                    moveStaus: false,
                    index: -1,
                    target: null
                },
                status: '',
                copyFeatures: [], // 副本
                moveItem: {
                    moveOriginCoordinate: null, // 移动前的坐标
                    originPoint: null,
                    name: ''
                }
            }
        }
    },
    computed: {
        ...mapState({
            mapObj: (state) => state.map,
            overlays: (state) => state.map.editOverlays
        })
    },
    methods: {
        delItem() {
            if (this.mapObj.select.curClickFeature['geometryName_'] === 'geometry') {
                this.delPoint()
            } else {
                this.delOverlay()
            }
            let dom = document.querySelector('.map-tool')
            dom.style.display = 'none'
        },
        // 删除点
        delPoint() {
            if (this.mapObj.select.curClickFeature) {
                this.mapObj.select.layer.getSource().removeFeature(this.mapObj.select.curClickFeature)
                this.$updateParams(['map', { select: { curClickFeature: null, layer: null } }])
                this.$emit('change', false)
            }
        },
        // 删除overlay
        delOverlay() {
            if (this.mapObj.select.curClickFeature) {
                this.mapObj.map.removeOverlay(this.mapObj.select.curClickFeature)
                this.$updateParams(['map', { select: { curClickFeature: null, layer: null } }])
                this.$emit('change', false)
            }
        },
        // 取消编辑
        cancelEdit() {
            this.clearCopy()
            this.$emit('change', false)
        },
        // 编辑feature
        ditItem() {
            console.log('编辑', this.mapObj.select.curClickFeature)
            // if (this.curItem.feature === this.mapObj.select.curClickFeature) {
            //     return
            // }
            if (this.mapObj.select.curClickFeature['geometryName_'] === 'geometry') {
                this.curItem.status = 'edit'
                let geom = this.mapObj.select.curClickFeature.getGeometry()
                let coordinates = geom.getCoordinates()
                coordinates = util.transforms(coordinates[0], true)
                this.curItem.target = geom
                this.curItem.feature = this.mapObj.select.curClickFeature
                // this.curItem.feature.set('editStatus', true)
                this.$emit('change', true)
                this.curItem.coordinates = coordinates
                // 构造点一个feature
                console.log(this.curItem.coordinates)
                this.createEditFeature()
            }
        },
        // 清除副本
        clearCopy() {
            this.curItem.copyFeatures.map((item) => {
                olMap.feature.removeFeature(this.mapObj.select.layer, item)
            })
            this.curItem.copyFeatures = []
        },
        // 创建编辑副本
        createEditFeature() {
            let name = this.mapObj.select.curClickFeature.get('geomName')
            let type = ''
            switch (name) {
                case 'polygon':
                case 'Polygon':
                    type = 'polygon'
                    break
                case 'line':
                case 'LineString':
                    type = 'line'
                    break
                case 'circle':
                case 'Circle':
                    type = 'circle'
                    break
            }
            this.clearCopy()
            console.log('this.curItem.coordinates', this.curItem.coordinates)
            let feature = polygon.drawPolygon(this.mapObj.select.layer, null, this.curItem.coordinates, type, { name: 'edit-feature' })
            let style = this.curItem.feature.getStyle()
            feature.setStyle(style)
            this.curItem.coordinates.map((item, index) => {
                let pointStyle = {
                    isIcon: true,
                    icon: {
                        src: require('../assets/images/point.png'),
                        size: [32, 32],
                        scale: 0.8,
                        offset: [0, 0]
                    }
                }
                this.curItem.copyFeatures.push(polygon.drawPolygon(this.mapObj.select.layer, pointStyle, item, 'point', { name: 'edit-point', editIndex: index }))
            })
            this.curItem.copyFeatures.push(feature)
            olMap.map.on('click', this.mapClick)
        },
        // 地图点击
        mapClick(e) {
            let lonlat = olMap.utils.transform(olMap.utils.mousePageLonlat(e), true)
            // 移动结束
            console.log('dianji', this.curItem.status)
            if (this.curItem.status === 'move') {
                console.log('接触移动')
                olMap.map.un('pointermove', this.polygonMove)
                this.curItem.moveItem = {
                    moveOriginCoordinate: null, // 移动前的坐标
                    originPoint: null,
                    name: ''
                }
                // this.curItem.status = ''
                return
            }
            let existFeature = olMap.map.forEachFeatureAtPixel(e.pixel, (feature) => {
                let name = feature.get('name')
                console.log(name)
                if (name === 'edit-point') {
                    if (feature.get('editIndex') === 0) {
                        return
                    }
                    // 如果处于非运动状态，选取该点运动
                    if (!this.curItem.movePoint.moveStaus) {
                        this.curItem.movePoint.moveStaus = true
                        olMap.map.on('pointermove', this.pointMove)
                        this.curItem.movePoint.index = feature.get('editIndex')
                        this.curItem.movePoint.target = feature
                        console.log('xxx', feature, this.curItem.movePoint.index)
                    } else {
                        this.curItem.movePoint.moveStaus = false
                        olMap.map.un('pointermove', this.pointMove)
                        let style = this.curItem.feature.getStyle()
                        olMap.feature.removeFeature(this.mapObj.select.layer, this.curItem.feature)
                        let newFeature = polygon.drawPolygon(this.mapObj.select.layer, null, this.curItem.coordinates, 'polygon', { name: 'edit-feature' })
                        newFeature.setStyle(style)
                        this.curItem.target = newFeature.getGeometry()
                        this.curItem.feature = newFeature
                        this.mapObj.select.curClickFeature = newFeature
                        this.curItem.movePoint = {
                            moveStaus: false,
                            index: -1,
                            target: null
                        }
                        this.$emit('change', true)
                        this.createEditFeature()
                    }
                }
            })
        },
        // 点移动
        pointMove(e) {
            let lonlat = util.mousePageLonlat(e)
            this.curItem.movePoint.target.getGeometry().setCoordinates(lonlat)
            // 根据下标改变数据
            let index = this.curItem.movePoint.index
            this.curItem.coordinates[index] = util.transform(lonlat, true)
            if (index === this.curItem.coordinates.length - 1) {
                this.curItem.coordinates[0] = this.curItem.coordinates[index]
            }
            this.createEditFeature()
        },
        // 图形移动
        moveItem() {
            let goem = this.mapObj.select.curClickFeature.getGeometry()
            let name = this.mapObj.select.curClickFeature.get('geomName')
            let lonlat = [0, 0]
            switch (name) {
                case 'polygon':
                case 'Polygon':
                case 'line':
                case 'LineString':
                    lonlat = goem.getCoordinates()
                    break
                case 'circle':
                case 'Circle':
                    lonlat = goem.getCenter()
                    // this.mapObj.select.curClickFeature.getGeometry().setCenter([24454292.762668338, 6803825.832727019])
                    break
            }
            this.curItem.moveItem.moveOriginCoordinate = lonlat
            this.curItem.moveItem.name = name
            this.curItem.status = 'move'
            console.log(goem, lonlat)
            olMap.map.on('pointermove', this.polygonMove)
            olMap.map.on('click', this.mapClick)
        },
        // 图形移动过程
        polygonMove(e) {
            let lonlat = olMap.utils.transform(olMap.utils.mousePageLonlat(e), true)
            this.movePolygon(lonlat)
        },
        // 绘制移动图形
        movePolygon(dest, val = [0, 0]) {
            let lonlat = JSON.parse(JSON.stringify(this.curItem.moveItem.moveOriginCoordinate))
            let name = this.curItem.moveItem.name
            switch (name) {
                case 'polygon':
                case 'Polygon':
                    lonlat = [util.transforms(lonlat[0], true)]
                    this.curItem.moveItem.originPoint = lonlat[0][0]
                    val[0] = this.curItem.moveItem.originPoint[0] - dest[0]
                    val[1] = this.curItem.moveItem.originPoint[1] - dest[1]
                    for (let k in lonlat[0]) {
                        lonlat[0][k] = [lonlat[0][k][0] - val[0], lonlat[0][k][1] - val[1]]
                    }
                    this.mapObj.select.curClickFeature.getGeometry().setCoordinates([util.transforms(lonlat[0])])
                    break
                case 'line':
                case 'LineString':
                    lonlat = util.transforms(lonlat, true)
                    this.curItem.moveItem.originPoint = lonlat[0]
                    val[0] = dest[0] - this.curItem.moveItem.originPoint[0]
                    val[1] = dest[1] - this.curItem.moveItem.originPoint[1]
                    for (let k in lonlat) {
                        lonlat[k] = [lonlat[k][0] + val[0], lonlat[k][1] + val[1]]
                    }
                    this.mapObj.select.curClickFeature.getGeometry().setCoordinates(util.transforms(lonlat))
                    break
                case 'circle':
                case 'Circle':
                    lonlat = dest
                    console.log(this.mapObj.select.curClickFeature.getGeometry(), util.transform(lonlat))
                    this.mapObj.select.curClickFeature.getGeometry().setCenter(util.transform(lonlat))
                    break
            }
        }
    },
    mounted() {}
}
</script>

<style scoped lang="less">
.ctrl-tool {
    .list {
        .item {
            color: #f00;
            cursor: pointer;
        }
    }
}
</style>
